<script setup lang="ts" name="Subcategory">
import axios from 'axios'
import { ref } from 'vue'
import { IResponse, IData } from '@/types'
import { getSubCategoryList } from '@/api'
import { initData } from '@/hooks'
const arr = ref<IData[]>([])
initData(getSubCategoryList).then((r) => (arr.value = r))
</script>

<template>
  <div class="wrap">
    <el-scrollbar>
      <h3 class="title">{{ $route.params.id }}</h3>
      <ul>
        <li v-for="item in arr" :key="item.id" class="item">
          <router-link :to="`/detail/${item.id}`">{{ item.name }}</router-link>
        </li>
      </ul>
    </el-scrollbar>
  </div>
</template>

<style scoped lang="less">
.wrap {
  .title {
    text-align: center;
    font-family: 'Slidefu';
    font-size: 70px;
  }
  .item {
    background-color: rgba(45, 221, 227, 0.3);
  }
}
</style>
